/**
 * 模块化写法步骤：
 * 第一步，创建init初始化函数
 * 第二步，创建模块化函数，由立即执行函数返回并保存到变量中。
 * 第三步，在初始化函数中执行模块化函数。
 * 第四步，在window.onload函数里执行init初始化函数。
 */
window.onload = function () {
    init();
}

function init() {
    initTodoList;
}

var initTodoList = (function () {
    var plusBtn = document.getElementsByClassName('j-show-input')[0], // +
        inputArea = document.getElementsByClassName('input-wrap')[0], //input输入框模块
        addItem = document.getElementsByClassName('j-add-item')[0], //新增项目
        itemContent = document.getElementById('textInput'), //input输入框
        oList = document.getElementsByClassName('j-list')[0], // ul
        inputShow = false, // 输入框的显示状态
        isEdit = false, // 是否为编辑状态
        curIdx = null; // 当前点击的li的下标

    //点击展开输入框按钮：+
    addEvent(plusBtn, 'click', function () {
        if (inputShow) {
            //输入框的状态为显示
            inputShowFun('close');
            restoreStatus(); // 重置输入框模块的状态
        } else {
            inputShowFun('open');
        }
    });

    //点击新增项目按钮
    addEvent(addItem, 'click', function () {
        var content = itemContent.value, //获取输入框的value值
            contentLen = content.length, //输入框的长度，用来判断输入框是否有输入内容
            oItems = document.getElementsByClassName('item'), // 获取li列表集合
            itemLen = oItems.length, //li列表的长度
            itemText; // li列表里面的p标签的文本
        //输入框没有输入内容
        if (contentLen <= 0) {
            return;
        }
        // li列表不为空的时候，遍历li列表，判断里面的p标签的文本与输入框新增的value值是否有重复
        if (itemLen > 0) {
            for (var i = 0; i < itemLen; i++) {
                itemText = elemChildren(oItems[i])[0].innerText; //遍历li列表里面的p标签的文本
                //将输入框新增的value值与列表的文本对比，看看是否已存在
                if (itemText === content) {
                    alert('已存在该项目');
                    return;
                }
            }
        }
        //列表的文本处于编辑状态
        if (isEdit) {
            var oItem = elemChildren(oItems[curIdx])[0]; //获取当前编辑项的li下的p标签
            oItem.innerText = content;
            restoreStatus();
        } else {
            var oLi = document.createElement('li');
            oLi.className = 'item';
            oLi.innerHTML = itemTpl(content);
            oList.appendChild(oLi); //将li拼接在ul底下
        }
        inputShowFun('close');
        itemContent.value = '';
    });

    //事件委托--给编辑、删除按钮的父类-ul绑定点击事件
    addEvent(oList, 'click', function (e) {
        var e = e || window.event,
            tar = e.target || e.srcElement,
            className = tar.className, //当前点击的事件源对象的类名
            oParent = elemParent(tar, 2), //获取li节点
            oItems = document.getElementsByClassName('item'); //获取li元素集合

        if (className === 'edit-btn fa fa-edit') {
            //编辑按钮
            var itemLen = oItems.length, //li集合的长度
                tarIndex = Array.prototype.indexOf.call(oItems, oParent), //返回当前点击的按钮的父元素li的下标
                item;
            for (var i = 0; i < itemLen; i++) {
                item = oItems[i];
                item.className = 'item'; // 循环给每个li的类名设置为item
            }
            curIdx = tarIndex; //当前点击的li的下标
            itemContent.value = oParent.childNodes[0].innerText; //回显要编辑的内容
            oParent.className += ' active'; //给当前点击的按钮的父元素li增加类名- active
            addItem.innerText = '编辑第' + (curIdx + 1) + '项'; // 给增加项目按钮修改文本，数组下标从0开始，所以+1
            inputShowFun('open');
            isEdit = true; //设置当前状态为编辑状态
        } else if (className === 'remove-btn fa fa-times') {                   
            //删除按钮
            var removeIndex = Array.prototype.indexOf.call(oItems, oParent); //返回当前点击的按钮的父元素li的下标 

            elemParent(tar, 2).remove(); // 移除对应的li     
                  
            //对比删除的是否为正在编辑的数据
            if (curIdx === removeIndex) {
                inputShowFun('close');
                restoreStatus(); // 重置输入框模块的状态
            }
        }
    });

    // li的html模板
    function itemTpl(text) {
        return (
            '<p class="item-content">' + text + '</p>' +
            '<div class="btn-group">' +
            '<a href="javascript:;" class="edit-btn fa fa-edit"></a>' +
            '<a href="javascript:;" class="remove-btn fa fa-times"></a>' + '</div>'
        )
    }

    // input输入框是否显示
    function inputShowFun(action) {
        if (action === 'close') {
            inputArea.style.display = 'none';
            inputShow = false;
        } else if (action === 'open') {
            inputArea.style.display = 'block';
            inputShow = true;
        }
    }

    // 重置输入框的状态
    function restoreStatus() {
        isEdit = false; //设置当前状态为非编辑状态
        curIdx = null; //新增项目状态，将当前选中的的li下标设置为null
        itemContent.value = ''; //输入框的value值清空
        addItem.innerText = '增加项目';
    }
})();